<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>DOM</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.box{
				background-color: pink;
				width: 300px;
				border: 10px solid #000;
			}
			.ap{
				background-color: red;
			}
			.ssss{
				background-color: green;
			}
		</style>
	</head>

	<body>
		<input type="text" name="sss" aaa='sss'>
		<div class="box" style="color: aqua;">
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
		</div>
		<p class="ap">aa01</p>
		<script type="text/javascript">
		// 合法属性  非法属性   class
			let oBox = document.querySelector('.box')
			let oIpt = document.querySelector('input')
			// 获取  修改
			
			oBox.onclick = function(){
				console.log(666);
				oBox.style.backgroundColor = 'blue'
			}
			
			console.dir(oBox);
			
			/*
	js  =   ES + DOM + BOM
	
	 一、 API的概念
	 API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，
	 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，
	 无需理解其内部工作机制细节，只需直接调用使用即可。
	 Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )
	 
	 文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理[可扩展标记语言]
	 （html或者xhtml）的标准[编程接口]
	 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式
	 二、DOM
	 1.什么是DOM DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。
	 - 文档：一个页面就是一个文档，DOM中使用document表示
	 - 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
	 - 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示
	 文档是文档节点
	 所有 HTML 元素是元素节点
	 所有 HTML 属性都是属性节点
	 插入到 HTML 元素中的文本为文本节点
	 注释是注释节点
		 2.获取元素节点的方法
		 var oBox = document.getElementById('box')
		 var oBox1 = document.getElementsByClassName('box')[0]
		 var oBox2 =document.getElementsByTagName('div')[0]
		 var span = oBox.getElementsByTagName('span')
		 
		 
		 let oBox3 = document.querySelector('.box span')
		 let oBox4 = document.querySelectorAll('.box span')
		 document.body  head
	document.documentElement  HTML
	
	querySelector  与 getElement  区别?(是否实时更新)
		
		获取 父节点   parentNode
		获取 子节点  childNodes
		获取 子元素节点    children 
		第一个子节点 firstChild
		最后一个子节点  lastChild
		第一个子元素节点    firstElementChild
		最后一个子元素节点  lastElementChild
		下一个兄弟节点 nextSibling  
		上一个兄弟节点 previousSibling
		下一个兄弟元素节点 nextElementSibling
		上一个兄弟元素节点 previousElementSibling
		
		
		添加节点 document.appendChild(element)	添加 HTML 元素
		往前面添加节点  oBox.insertBefore(要添加的节点,添加在谁的前面)
		//  dom.remove()  将dom节点直接移除
		替换节点 oBox.replaceChild(替换的子节点,被替换的子节点)	替换 HTML 元素
		写入  document.write(text)	写入 HTML 输出流
		克隆节点 document.cloneNode()  返回一个新节点 参数 为true 连同内容一起复制 否则只复制节点
		创建节点 document.createElement(element)	创建 HTML 元素
		删除节点 document.removeChild(element)	删除 HTML 元素
		
		
	 3.改变元素内容
	**innerText和innerHTML的区别**
	- 获取内容时的区别：
		  innerText会去除空格和换行，而innerHTML会保留空格和换行	
	- 设置内容时的区别：
		  innerText不会识别html，而innerHTML会识别
	
	
	5.常用属性的操作
		内置属性-合法属性   直接  .操作	
		有两个特殊的属性   class  因为是关键字 所以 要用  className
						style  获取的是一个 style 对象   改变样式 要通过 oBox.style.backgroundColor = 'red'
	 自定义属性-非法属性
		通过  oBox.getAttribute('hnc')  获取 
			oBox.setAttribute('hnc',9999999999) 改变
			oBox.removeAttribute('hnc')  删除
	 oBox.hasAttribute('bbb')   判断oBox 是否存在bbb 属性
	6.DOM 事件 
		
	 
	 案例  密码格式错误
	 
	
	 */
		</script>
	</body>

</html>